<template>
  <div class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="填报异常煤矿列表"
      back-icon-color="#fff"
      title-width="500"
      title-color="#fff"
    />

    <div class="content">
      <div class="minesInf-input">
        <u-input
          style="
            padding: 0 15rpx 0;
            margin: 0 20rpx;
            background-color: rgba(0, 0, 0, 0.03);
            border-radius: 10rpx;
          "
          v-model="searchLabel"
          placeholder="请选择"
          type="select"
          @click="showMinesInf = true"
          :select-open="showMinesInf"
        />
      </div>
      <!-- <div class="minesLength">
				煤矿数量：
				<span class="">{{ minesNum }}</span>
			</div> -->
      <div>
        <div class="mine-num">
          煤矿数量
          <span class="mine-num-val">{{ minesNum }}</span>
        </div>
      </div>
    </div>

    <scroll-view
      :scroll-y="true"
      class="u-flex-1 of-hide"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#f5f5f5"
      @refresherrefresh="onRefresh"
      @scrolltolower="onScrollToLower"
    >
      <!-- v-for="item of minesList"
        :key="item.customerNo"
        box-shadow="0px 0px 8px #ddd6d6"
        :body-style="{ padding: '0 ' }"
        :head-style="{ padding: '28rpx 30rpx 20rpx' }"
        :head-border-bottom="false" -->
      <div
        v-for="item of minesList"
        :key="item.customerNo"
        class="cardItem"
        @click="toDetails(item)"
      >
        <div v-if="item.produceState" class="content-item-border"></div>

        <div class="content-item-head">
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin: 0 30rpx 30rpx;
            "
          >
            <div style="margin-top: 40rpx; display: flex; align-items: center">
              <p>{{ item.customerName }}</p>
              <p style="font-size: 22rpx; color: gray; margin: 10rpx 0 0 20rpx">
                {{ item.countyName }}
              </p>
            </div>

            <div style="display: flex; align-items: center; margin-top: 45rpx">
              <p style="font-size: 22rpx; color: rgba(0, 0, 0, 0.5)">详情</p>
              <div>
                <u-icon
                  name="arrow-right"
                  color="rgba(0,0,0,0.5)"
                  size="25"
                ></u-icon>
              </div>
            </div>
          </div>

          <div v-if="item.produceState" class="content-item-status">
            <text style="font-size: 25rpx">{{ item.produceState }}</text>
          </div>
        </div>

        <div class="content-item-body">
          <p style="margin: 0 0 30rpx 30rpx">未完成填报</p>
          <div class="mineInfDetails">
            <div v-if="item.coalSeamIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.coalSeamIsFill }}
              </p>
            </div>
            <div v-if="item.reservesIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.reservesIsFill }}
              </p>
            </div>
            <div
              v-if="item.reservesLastMonthIsUpdate"
              class="mineInfDetails-item"
            >
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.reservesLastMonthIsUpdate }}
              </p>
            </div>
            <div
              v-if="item.reservesLastMonthIsPunctualUpdate"
              class="mineInfDetails-item"
            >
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.reservesLastMonthIsUpdate }}
              </p>
            </div>
            <div v-if="item.fourIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.fourIsFill }}
              </p>
            </div>
            <div v-if="item.fourLastMonthIsUpdate" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.fourLastMonthIsUpdate }}
              </p>
            </div>
            <div v-if="item.hcSucceededPlanIsErr" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.hcSucceededPlanIsErr }}
              </p>
            </div>
            <div
              v-if="item.fourLastMonthIsPunctualUpdate"
              class="mineInfDetails-item"
            >
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.fourLastMonthIsPunctualUpdate }}
              </p>
            </div>
            <div v-if="item.jjSucceededPlanIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.jjSucceededPlanIsFill }}
              </p>
            </div>
            <div v-if="item.hcYearPlanIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.hcYearPlanIsFill }}
              </p>
            </div>
            
            <div v-if="item.hcSucceededPlanIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.hcSucceededPlanIsFill }}
              </p>
            </div>
            <div v-if="item.produceIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.produceIsFill }}
              </p>
            </div>
            <div v-if="item.groundIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.groundIsFill }}
              </p>
            </div>
            <div v-if="item.waterIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.waterIsFill }}
              </p>
            </div>
            <div v-if="item.jjSucceededPlanIsErr" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.jjSucceededPlanIsErr }}
              </p>
            </div>
            <div v-if="item.regionOutBurstIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.regionOutBurstIsFill }}
              </p>
            </div>
            <div v-if="item.partOutBurstIsFill" class="mineInfDetails-item">
              <div class="border"></div>
              <p class="situationItem-label">
                {{ item.partOutBurstIsFill }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <template v-if="!showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty
            text="抱歉，暂无相关数据~"
            :src="require('@/static/image/empty.png')"
          ></u-empty>
        </view>
      </template>
      <view class="p-t-10 p-b-10" v-else>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
    <u-select
      v-model="showMinesInf"
      mode="mutil-column-auto"
      :list="list"
      @confirm="confirm"
    >
    </u-select>
  </div>
</template>

<script>
import uIcon from "../../../../uview-ui/components/u-icon/u-icon.vue";
import USection from "../../../../uview-ui/components/u-section/u-section.vue";
export default {
  components: { uIcon, USection },
  data() {
    return {
      showMinesInf: false,
      searchLabel: "",
      searchData: {},
      minesNum: 0,
      list: [
        {
          value: 1,
          label: "煤层信息",
          children: [
            {
              value: 1,
              label: "未填报",
              extra: "coalSeamIsFill",
            },
          ],
        },
        {
          value: 2,
          label: "储量动态",
          children: [
            {
              value: 1,
              label: "未填报",
              extra: "reservesIsFill",
            },
            // {
            //   value: 1,
            //   label: "上月未更新",
            //   extra: "reservesLastMonthIsUpdate",
            // },
            // {
            //   value: 1,
            //   label: "上月未按时更新",
            //   extra: "reservesLastMonthIsPunctualUpdate",
            // },
          ],
        },
        {
          value: 3,
          label: "矿井三量",
          children: [
            {
              value: 1,
              label: "未填报",
              extra: "fourIsFill",
            },

            // {
            //   value: 1,
            //   label: "上月未更新",
            //   extra: "fourLastMonthIsUpdate",
            // },

            // {
            //   value: 1,
            //   label: "上月未按时更新",
            //   extra: "fourLastMonthIsPunctualUpdate",
            // },
          ],
        },
        {
          value: 4,
          label: "掘进年度计划",
          children: [
            {
              value: 1,
              label: "今年未填报",
              extra: "jjYearPlanIsFill",
            },
          ],
        },
        {
          value: 5,
          label: "回采年度计划",
          children: [
            {
              value: 1,
              label: "今年未填报",
              extra: "hcYearPlanIsFill",
            },
          ],
        },
        {
          value: 6,
          label: "掘进接续计划",
          children: [
            {
              value: 1,
              label: "今年未填报",
              extra: "jjSucceededPlanIsFill",
            },
            {
              value: 1,
              label: "填报异常",
              extra: "jjSucceededPlanIsErr",
            },
          ],
        },
        {
          value: 7,
          label: "回采接续计划",
          children: [
            {
              value: 1,
              label: "今年未填报",
              extra: "hcSucceededPlanIsFill",
            },
            {
              value: 1,
              label: "填报异常",
              extra: "hcSucceededPlanIsErr",
            },
          ],
        },
        {
          value: 8,
          label: "工作面生产填报",
          children: [
            {
              value: 1,
              label: "未填报",
              extra: "produceIsFill",
            },
          ],
        },
        {
          value: 9,
          label: "地测预报填报",
          children: [
            {
              value: 1,
              label: "异常",
              extra: "groundIsFill",
            },
          ],
        },
        {
          value: 10,
          label: "探放水填报",
          children: [
            {
              value: 1,
              label: "异常",
              extra: "waterIsFill",
            },
          ],
        },
        {
          value: 11,
          label: "区域防突填报",
          children: [
            {
              value: 1,
              label: "异常",
              extra: "regionOutBurstIsFill",
            },
          ],
        },
        {
          value: 12,
          label: "局部防突填报",
          children: [
            {
              value: 1,
              label: "异常",
              extra: "partOutBurstIsFill",
            },
          ],
        },
      ],
      countyNo: "",
      minesList: [],
      options: {},
      triggered: false,
      scrollType: "onLoad",
      status: "loading",
      showEmpty: true,
      page: {
        pageSize: 20,
        pageNumber: 1,
      },
    };
  },
  onLoad(option) {
    this.searchData = JSON.parse(option.data);
    this.countyNo = this.searchData.countyNo;
    this.searchLabel = option.searchLabel;
    this.getMinesList("onLoad");
  },
  methods: {
    confirm(e) {
      console.log(e);
      this.searchLabel = e[0].label + e[1].label;
      this.page.pageNumber = 1;
      this.scrollType = "confirm";
      let oldObj = { extra: e[1].extra, value: e[1].value };
      this.searchData = {};
      this.searchData[oldObj.extra] = oldObj.value;
        this.minesList=[]
      this.getMinesList(this.scrollType);
    },
    toDetails(item) {
      //   item.countyNo = this.options.countyNo;
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/mineList/detail?item=${JSON.stringify(
          item
        )}`,
      });
    },
    init() {
      this.page.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = true;
    },
    async getMinesList(type) {
      console.log('this.minesList',this.minesList);
      let params = {};
      if (type == "onLoad") {
        params = {
          pageSize: this.page.pageSize,
          pageNumber: this.page.pageNumber,
          ...this.searchData,
        };
      } else if (type != "onLoad") {
        let paramItem = {
          pageSize: this.page.pageSize,
          pageNumber: this.page.pageNumber,
          countyNo: this.countyNo,
        };
        params = Object.assign(paramItem, this.searchData);
      }
      const { content, total } = await (
        await this.$post("/cjt/app/fill/customerInfos", params)
      ).body;
      if (content) {
        this.minesList =
          this.page.pageNumber === 1 ? content : this.minesList.concat(content);
        // 到底了
        if (content.length < this.page.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (
          this.page.pageNumber === 1 &&
          this.minesList &&
          this.minesList.length === 0
        ) {
          this.showEmpty = false;
        } else {
          this.showEmpty = true;
        }
        this.minesNum = total;
      }
    },
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getMinesList(this.scrollType);
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onScrollToLower() {
      if (this.status === "loading") {
        this.page.pageNumber++;
        this.getMinesList(this.scrollType);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  // background-color: rgba(0, 0, 0, 0.03);
  background: #fff;
}

.minesInf-input {
  border-radius: 10rpx;
  background-color: white;
  margin-bottom: 10rpx;
}
.cardItem {
  background: #fff;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  padding: 28rpx 0 20rpx;
  margin: 15rpx 20rpx;
  border-radius: 10rpx;
  position: relative;
  .content-item-border {
    position: absolute;
    background: #4bc28c;
    width: 10rpx;
    height: 50rpx;
    left: -10rpx;
    top: 14rpx;
    border-radius: 30rpx 0rpx 0 30rpx;
  }
}
.content {
  // flex: 1;
  padding-top: 20rpx;
  overflow: auto;
  box-sizing: border-box;

  .mine-num {
    text-align: center;
    height: 66px;
    background: #fff;
    line-height: 60px;
    color: #fff;
    background: url("/static/image/cjt/cjnxzc.png");
    background-size: 100% 100%;
    margin: 20rpx 20rpx 10rpx;

    .mine-num-val {
      font-size: 30px;
      margin-left: 10px;
      position: relative;
      top: 2px;
    }
  }

  .minesLength {
    background-color: white;
    padding: 10rpx 0 10rpx;
    display: flex;
    justify-content: center;
  }
}

.mineInfDetails {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 20rpx 20rpx;

  .mineInfDetails-item {
    width: 48%;
    height: 50rpx;
    padding: 17rpx 0 17rpx 7rpx;
    margin-bottom: 7rpx;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 10rpx;
    position: relative;
    display: flex;
    align-items: center;
    // font-size: 22rpx;
    // display: flex;
    // justify-content: center;
    .border {
      position: absolute;
      left: 20rpx;
      width: 10rpx;
      background: linear-gradient(to bottom, #ffadad 5%, #f34822);
      height: 40rpx;
      border-radius: 10rpx;
    }
    .situationItem-label {
      margin-left: 40rpx;
      display: flex;
      font-size: 22rpx;
      justify-content: space-between;
    }
  }
}

.content-item-head {
  position: relative;
  z-index: 10;

  .content-item-status {
    background-color: #4bc28c;
    position: absolute;
    color: white;
    padding: 5rpx 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -16rpx;
    left: -2rpx;
    border-radius: 0 10rpx 10rpx 0rpx;
  }
}
.content-item-body {
  padding: 20rpx 0 0 0;
  border-radius: 20rpx 20rpx 0 0;
  background: linear-gradient(to bottom, #fff5f5, white 13%, white);
}
</style>
